<template>
  <h3>组件式API生命周期钩子函数</h3>
  <p>数据值:{{num}}</p>
  <button @click="num++">更新数字</button>
  <hr>
  <Faa></Faa>
</template>

<script>
import { ref, onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue';
// import Faa from './Faa.vue';
export default {
  name: 'Foo',
  setup() {
    console.log('setup函数中代码执行了');
    let num = ref(10);
    onBeforeMount(() => {
      console.log('onBeforeMount执行了');
    });
    onMounted(() => {
      console.log('onMounted执行了');
    });
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate执行了');
    });
    onUpdated(() => {
      console.log('onUpdated执行了');
    });
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount执行了');
    });
    onUnmounted(() => {
      console.log('onUnmounted执行了');
    });

    // let num = inject('aaa');
    // const user = reactive({
    //   name: 'lalala',
    //   age: 20,
    //   car: {
    //     brand: '奔马',
    //     price: 1000000
    //   }
    // });

    // 情况1 监听的对象中属性值是简单值的时候，默认开启的就是深度监听 新值和旧值是一样的 即使是加上deep:true也一样
    // watch(
    //   user,
    //   (newValue, oldValue) => {
    //     console.log(newValue, oldValue);
    //   },
    //   {
    //     deep: false,
    //     immediate: true
    //   }
    // );

    // 情况2 监听的对象中属性值是对象有变化时 默认开启的还是深度监听 新值旧值是一样的，因为是复杂数据类型，是同一块内存空间
    // watch(
    //   user,
    //   (newValue, oldValue) => {
    //     console.log(newValue, oldValue);
    //   },
    //   { deep: true }
    // );

    // 情况3 只监听对象的某一个具体属性  新值旧值不一样
    // watch(
    //   () => user.car.brand,
    //   (newValue, oldValue) => {
    //     console.log(newValue, oldValue);
    //   }
    // );

    // 情况4 可以一次性监听多个值
    // watch([() => user.car.brand, () => user.car.price], (newValue, oldValue) => {
    //   console.log(newValue, oldValue);
    // });

    // 情况5 监听整个对象 新值和旧值是一样的 但是添加了deep:true 和原来一样
    // 如果加了deep:false 此时不触发
    // watch(
    //   () => user.car,
    //   (newValue, oldValue) => {
    //     console.log(newValue, oldValue),
    //       {
    //         deep: false,
    //         immediate: true
    //       };
    //   }
    // );
    return {
      // user
      num
    };
  }
};
</script>

<style>
</style>